<template>
  <div>
    <h1>playground</h1>
    <!--
      复习插槽
      默认插槽（匿名插槽）
      具名插槽
      作用域插槽

      实现一个组件 左边的结构可以定制 右边的结构也可以定制 默认的结构
     -->
    <slot-comp>
      <template #default>

        <h2>哈哈</h2>
      </template>
      <template #left="obj">
        <h3>{{ obj }}</h3>
        <h2>123</h2>
      </template>
      <template #right="obj">
        <h3>{{ obj }}</h3>
        <h2>456</h2>
      </template>
    </slot-comp>
    <!-- 11 -->
    <slot-comp>
      <h2>嘿嘿</h2>
      <template #left="{b}">
        <h3>{{ b }}</h3>
        <h2>abc</h2>
      </template>
      <template #right="obj">
        <h3>{{ obj }}</h3>
        <h2>xyz</h2>
      </template>
    </slot-comp>
  </div>
</template>

<script>
import slotComp from './slot-comp.vue'
export default {
  components: { slotComp }

}
</script>

<style>

</style>
